import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import { AtIcon, AtTag } from 'taro-ui'
import './hopDetails.scss'
import app from '../../main'
import right from '../../img/right.png'
import eyes from '../../img/eyes.png'
import star from '../../img/star.png'


export default class HopDetails extends Component {
    config = {
        navigationBarTitleText: ''
    }
    constructor() {
        super(...arguments)
        this.state = {
            //医院数据
            hospiteInfo:
                {
                    "id":"1",
                    "name":"广州眼科医院",
                    "labels":"医保定点,准分子,专科医院",
                    "image":null,
                    "address_detail":"",
                    "summary":null,
                    "desc":null
                },
            //医生数据
            docInfo: [
                {
                    "id":"1",
                    "name":"测试医生",
                    "head_image":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIjJwaevDnZ1wNB6MRLicmBRgnWVvRpalJFMPMLzOHribyM3dDY5vI5ljGHZLVVe7AnUicib2UKSD4ickw/132",
                    "hospital":"中山眼科医院",
                    "positional_title":"主任医师",
                    "speciality":null,
                    "labels":[
                        "白内障专家",
                        "爱眼力荐",
                        "爱眼力荐",
                        "平均响应:12分钟"
                    ],
                    "general_score":"0.0",
                    "response_time":"12",
                    "grade":"三甲"
                }
            ],
            // 轮播图数据
            lunboList:[
            ],
            //服务项目数据
            serviceList:[]
        }   
    }
    
    offset = 0        
    length = 25

    //跳转到医院详情
    gotoAolideHos(hos_id,hos_title) {    
        app.navigateTo('../aolideHos/aolideHos'+'?id='+hos_id+'&title='+hos_title);
    }
    
    //跳转到医生主页
    gotoDoctorindex(id) {
        app.navigateTo('../doctorindex/doctorindex?id='+id);
    }

    //跳转到医院医生列表
    gotoAolideDoc() {
        console.log(55,this.state.docInfo)
        app.navigateTo('../aolideDoc/aolideDoc?title='+this.state.hospiteInfo.name)
    }

    //跳转到服务项目列表
    gotoAolideOperation() {
        app.navigateTo('../aolideOperation/aolideOperation?title='+this.state.hospiteInfo.name+'&id='+this.state.hospiteInfo.id)
    }

    //跳转到服务项目详情
    gotoAolideOpmeal(id) {
        app.navigateTo('../aolideOpmeal/aolideOpmeal?title='+this.state.hospiteInfo.name+'&id='+id+'&hospital_id='+this.state.hospiteInfo.id)
    }
    // 数据获取
    getData(){
        let me = this
        let data = {hospital_id:this.$router.params.id}

        //医院数据
        app.post('web/hospital/hospitalDetail',data,function(res){
            console.log('res1a',res)
            let result = res.data.result
            for(let i = 0; i < result.labels.length; i++){
                if(result.labels[i] == ''){
                    result.labels.splice(i,1)
                }
            }
            me.setState({
                hospiteInfo:result
            },()=>{
                // 医生数据
                let docList = {offset:0,length:4,hospital:me.state.hospiteInfo.name}
                app.post('web/members/doctorList',docList,function(res){
                    let list = res.data.result.list
                    me.setState({
                        docInfo:list
                    })
                })
            })
        })

        // 轮播图
        app.post('web/hospital/hospitalSlideImage',data,(res)=>{
            me.setState({             
                lunboList:res.data.result
            },()=>{
                console.log(me.state.lunboList)
            })
        })

        //服务项目
        let serviceData = {hospital_id:this.$router.params.id,offset:this.offset,length:this.length}
        app.get('web/hospital/hospitalServer', serviceData, (res)=>{
            let list = res.data.result.data
            me.setState({
                serviceList:list
            },()=>{
                console.log(12,me.state.serviceList)
            })
        })
    }

    callPhone () {
        let phone = this.state.hospiteInfo.telephone
        Taro.makePhoneCall({
          phoneNumber: phone
        })
    }

    ramdomDoctor () {
        // app.navigateTo('../chatsub/pages/Chat/Chat?receiver_id='+this.state.hospiteInfo.advisory_doctor_id)
        let property = this.state.hospiteInfo.hop_url 
        console.log('hop_url',property)
        if(property){
            app.navigateTo(`../webViewContaziner/webViewContaziner?group=${property}`)
        }else{
            app.toast('该医院暂未开通客服咨询')
        }
    }
    
    componentDidMount(){
        this.getData();
        Taro.setNavigationBarTitle({
            title:this.$router.params.title
        })
        let arr=['1','2','3','3'];
        console.log(Array.from(new Set(arr)))
    }


    render() {
        // 医生数据
        let infoList = this.state.docInfo.map((item) => {
            return <View className='docInfo' onClick={this.gotoDoctorindex.bind(this,item.id)}>
                <View>
                    <Image
                        className='avider'
                        src={item.head_image}
                    />
                </View>
                <View className='infoText'>
                    <View className='textTile'>
                        <View>
                            <Text className='name'>{item.name}</Text>
                            <Text className='t'>{item.positional_title}</Text>
                        </View>
                        <View>
                            <Image className='starStyle' src={star} />
                            <Text className='tn'>{item.general_score}</Text>
                        </View>
                    </View>
                    <View ><Text>{item.hospital}</Text></View>
                    <View className='t2'>
                        <Text className='line-clamp1'>擅长：{item.speciality}</Text>
                    </View>
                    <View className='infoTag'>
                    {item.labels.map((item2)=>{
                           return <View>
                           <AtTag className='tag' circle>
                               {item2}
                           </AtTag>
                       </View>
                    })}
                    </View>
                </View>
            </View>
        })
        // 医院数据
        let hospiteInfo = this.state.hospiteInfo
        //服务项目
        let serviceLists = this.state.serviceList.map((item)=>{
            return <View className='serviceBox' onClick={this.gotoAolideOpmeal.bind(this,item.id)}>
                       <View><Image src={item.shrink_image} className='serviceImg'/></View>
                       <View className='serviceCon'>
                          <View className='serviceName'>{item.title}</View>
                          <View className='servicePay'>
                              <View className='nowMoney'>
                                  现价: <Text className='now'>  {item.current_price}</Text>
                              </View>
                              <View className='oldMoney'>
                                  原价: <Text className='old'>  {item.original_price}</Text>
                              </View>
                          </View>
                          <View className='status'>
                               <View><Image src={eyes} className='eyes'/></View>
                               <View className='persons'><Text>{item.make_num}</Text>人预约成功</View>
                          </View>
                       </View>
                   </View>
        })
        return (
            <View className='hopDetails'>
                <Swiper
                    className='swiper'
                    indicatorDots
                    indicatorColor='#ccc'
                    indicatorActiveColor='#fff'
                    circular
                    interval={2000}
                    autoplay
                >
                {this.state.lunboList.slide_image.map((item) => {
                return <SwiperItem>
                            <View>
                                <Image className='swiperImage' src={item} />
                            </View>
                        </SwiperItem>
                })}
                </Swiper>
                {/* 医院信息 */}
                <View className='title'>
                    <Text>{hospiteInfo.name}</Text>
                </View>
                {/* 医院标签 */}
                <View className='view-tag'>
                    {hospiteInfo.labels.map((item) => {
                        return <AtTag className={item.length == 0 || item.length == undefined || item.length == null ? 'noshow' : 'tag'} type='secondary' size='small' circle >
                                    {item}
                                </AtTag>
                    })}
                </View>
                <View className='title2'>
                    <AtIcon value='map-pin' size='14'></AtIcon>
                    <Text>{hospiteInfo.address_detail}</Text>
                </View>
                <View className='title3'>
                    <Text>医院介绍</Text>
                    <View onClick={this.gotoAolideHos.bind(this,hospiteInfo.id,hospiteInfo.name)}>
                        <Text>更多</Text>
                        <Image className='rightIamge' src={right} />
                    </View>
                </View>
                <View className='textArea'>
                    {hospiteInfo.summary}
                </View>
                {/* 医生信息 */}
                <View className='title3'>
                    <Text>医生顾问</Text>
                    <View onClick={this.gotoAolideDoc.bind(this)}>
                        <Text>更多</Text>
                        <Image className='rightIamge' src={right} />
                    </View>
                </View>
                <View>{infoList}</View>
                {/*服务项目*/}
                {/* <View className='serviceAuto'>
                    <View className='service'>
                        <Text>服务项目</Text>
                        <View onClick={this.gotoAolideOperation.bind(this)}>
                            <Text>更多</Text>
                            <Image className='rightIamge' src={right} />
                        </View>
                </View>
                <View>{serviceLists}</View>
                </View> */}
                {/* 底部那妞信息 */}
                <View className='bottomBtn2'>
                    <View className='leftBtn' onClick={this.callPhone.bind(this)}>
                        <Text>电话咨询</Text>
                    </View>
                    <View className='rightBtn' onClick={this.ramdomDoctor.bind(this)}>
                        <Text>在线咨询</Text>
                    </View>
                </View>
            </View>
        )
    }
}    
